<template>
    <div class="xjcategorylist">
        <van-cell v-if="livelist.length == 0 && columnlist.length == 0">
            <template #title>
                <span style="font-weight: bold; font-size: 16px">{{ category.name ? category.name : '待定名' }}</span>
            </template>
            <template #right-icon>
                查看更多
                <van-icon name="arrow" size="15" />
            </template>
        </van-cell>
		
        <div v-if="livelist.length == 0 ? false : true">
            <van-cell>
                <template #title>
                    <span style="font-weight: bold; font-size: 16px">{{ category.name }}直播</span>
                </template>
                <template #right-icon>
                    <span @click="clickMoreLiveList()" style="color: black">
                        查看更多
                        <van-icon name="arrow" size="15" />
					</span>
                </template>
            </van-cell>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-card
                    num="2"
                    price="2.00"
                    :desc="item.description"
                    :title="item.title"
                    thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                    origin-price="10.00"
                    v-for="(item, index) in livelist"
                    :key="index"
                    @click="clickLive(item.id)"
                >
                    <template #thumb>
                        <van-image width="110" height="90" :src="item.cover" />
                    </template>
                    <template #price>
                        <span style="color: red">{{ item.price == 0 ? '免费' : '￥' + item.price }}</span>
                    </template>
                    <template #origin-price>
                        <span>{{ item.marking_price == 0 ? '' : '￥' + item.marking_price }}</span>
                    </template>
                    <template #tags>
                        <van-tag plain type="danger" style="margin-right: 3px" v-for="(item1, index1) in item.tag" :key="index1">{{
                            item1
                        }}</van-tag>
                    </template>
                    <template #num>
                        <span>{{ item.view }}次观看</span>
                    </template>
                </van-card>
            </van-pull-refresh>
        </div>
		
        <div v-if="columnlist.length == 0 ? false : true">
            <van-cell>
                <template #title>
                    <span style="font-weight: bold; font-size: 16px">{{ category.name }}专栏</span>
                </template>
                <template #right-icon>
                    <span @click="clickMoreColumnList()" style="color: black">
                        查看更多
                        <van-icon name="arrow" size="15"
                    /></span>
                </template>
            </van-cell>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh2">
                <van-card
                    num="2"
                    price="2.00"
                    :desc="item4.description"
                    :title="item4.title"
                    thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                    origin-price="10.00"
                    v-for="(item4, index4) in columnlist"
                    :key="index4"
                    @click="clickColumn(item4.id,item4.type)"
                >
                    <template #thumb>
                        <van-image width="110" height="90" :src="item4.cover" />
                    </template>
                    <template #price>
                        <span style="color: red">{{ item4.price == 0 ? '免费' : '￥' + item4.price }}</span>
                    </template>
                    <template #origin-price>
                        <span>{{ item4.marking_price == 0 ? '' : '￥' + item4.marking_price }}</span>
                    </template>
                    <template #tag v-if="item4.marking_price != 0">
                        <span style="color: #fff" v-if="item4.act_name == 'seckill'">秒杀</span>
                        <span style="color: #fff" v-if="item4.act_name == 'limit_discount'">限时折扣</span>
                    </template>
                    <template #tags>
                        <van-tag plain type="danger" style="margin-right: 3px" v-for="(item5, index5) in item4.tag" :key="index5">{{
                            item5
                        }}</van-tag>
                    </template>
                    <template #num>
                        <span>{{ item4.view }}次观看</span>
                    </template>
                </van-card>
            </van-pull-refresh>
        </div>
		
		<div v-if="courselist.length == 0 ? false : true">
		    <van-cell>
		        <template #title>
		            <span style="font-weight: bold; font-size: 16px">{{ category.name }}课程</span>
		        </template>
		        <template #right-icon>
		            <!-- <span @click="clickMoreColumnList()" style="color: black"> -->
					<span @click="clickMoreKnowledgeList()" style="color: black">
		                查看更多
		                <van-icon name="arrow" size="15"
		            /></span>
		        </template>
		    </van-cell>
			
		    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
		        <van-card
		            num="2"
		            price="2.00"
		            :desc="item.description"
		            :title="item.title"
		            thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
		            origin-price="10.00"
		            v-for="(item, index) in courselist"
		            :key="index"
					@click="clickKnowledge(item.id,item.type)"
		        >
		            <template #thumb>
		                <van-image width="110" height="90" :src="item.cover" />
		            </template>
		            <template #price>
		                <span style="color: red">{{ item.price == 0 ? '免费' : '￥' + item.price }}</span>
		            </template>
		            <template #origin-price>
		                <span>{{ item.marking_price == 0 ? '' : '￥' + item.marking_price }}</span>
		            </template>
		            <template #tags>
		                <van-tag plain type="danger" style="margin-right: 3px" v-for="(item1, index1) in item.tag" :key="index1">
							{{item1}}
						</van-tag>
		            </template>
		            <template #num>
		                <span>{{ item.view }}次观看</span>
		            </template>
		        </van-card>
		    </van-pull-refresh>
		</div>
		
    </div>
</template>

<script>
import xjsearch from '@/components/shop/xjsearch.vue';
import xjmenubar from '@/components/shop/xjmenubar.vue';
export default {
    props: ['category', 'prevent'],
    components: {
        xjsearch,
        xjmenubar
    },
    data() {
        return {
            courselist:[],
            cellname: '待定名', //直播分类名
            id: '', //发送子分类id获取cardlist
            columnlist: [], //视频数据列表
            livelist: [],
            page: 1, //第1页数据
            refreshing: false
        };
    },
    methods: {
        onRefresh() {
            this.page = 1;
            this.getLiveLIst(this.id);
            this.$toast.success('刷新成功');
        },
        onRefresh2() {
            this.page = 1;
            this.getColumnList(this.id);
            this.$toast.success('刷新成功');
        },
        async getColumnList(id) {
            //获得专栏列表
            let query = {
                id,
                status: 1,
                page: this.page,
                rows: 4
            };
            //let res = await this.$frontaxios.post(this.$front.getcolumnListData,query);
            let res = await this.$frontaxios.post(this.$front.getColumnList, query);
            // console.log(res);
            if (res.code == 1) {
                this.columnlist = res.data.columndata.slice(0, 5);
                for (let i = 0; i < this.columnlist.length; i++) {
                    if (this.columnlist[i].tag) {
                        this.columnlist[i].tag = this.columnlist[i].tag.split(',');
                    }
                }
            } else {
                console.log('获取直播数据列表失败');
            }
        },
        async getcourseList(id) {
            //获得专栏列表
            let query = {
                id,
                status: 1,
            };
            //let res = await this.$frontaxios.post(this.$front.getcolumnListData,query);
            let res = await this.$frontaxios.post(this.$front.getKnowledgeList3, query);
            if (res.code == 1) {
                this.courselist = res.data.list.slice(0, 5);
                for (let i = 0; i < this.courselist.length; i++) {
                    if (this.courselist[i].tag) {
                        this.courselist[i].tag = this.courselist[i].tag.split(',');
                    }
                }
            } else {
                console.log('获取直播数据列表失败');
            }
        },
        async getLiveList(id) {
            //获得直播列表
            let query = {
                id,
                status: 1,
                page: this.page,
                rows: 4
            };
            let res = await this.$frontaxios.post(this.$front.getLiveList, query);
            if (res.code == 1) {
                this.livelist = res.data.livecoursedata.slice(0, 5);
                for (let i = 0; i < this.livelist.length; i++) {
                    if (this.livelist[i].tag) {
                        this.livelist[i].tag = this.livelist[i].tag.split(',');
                    }
                }
            } else {
                console.log('获取直播数据列表失败');
            }
        },
		
		clickKnowledge(id,type) {
            if (this.prevent) {
                return;
            }
			
			if(type == 'image_text'){//图文内容页
				this.$router.push({
					name: 'image_textcontent',
					query: {
						id: id
					}
				});
			}else if(type == 'audio'){//音频内容页
				this.$router.push({
					name: 'audiocontent',
					query: {
						id: id
					}
				});
			}else if(type == 'video'){//视频内容页
				this.$router.push({
					name: 'videocontent',
					query: {
						id: id
					}
				});
			}
        },
		
		clickLive(id) {
			if (this.prevent) {
			    return;
			}
			
			this.$router.push({
			    name: 'livecontent',
			    query: {
			        id
			    }
			});
		},
		
        clickColumn(id,type) {
            if (this.prevent) {
                return;
            }
			
			if(type == 'column'){//专栏内容页
				this.$router.push({
					name: 'product',
					query: {
						id: id
					}
				});
			}else if(type == 'exam'){//试卷内容页
				this.$router.push({
					name: 'examcontent',
					query: {
						id: id
					}
				});
			}
        },
        clickMoreLiveList(id) {
            if (this.prevent) {
                return;
            }
            this.$router.push({ name: 'morelivelist', query: { id: this.category.id } });
        },
        clickMoreColumnList(id) {
            if (this.prevent) {
                return;
            }
            this.$router.push({ name: 'morecolumnlist', query: { id: this.category.id } });
        },
		clickMoreKnowledgeList(id) {
		    if (this.prevent) {
		        return;
		    }
		    this.$router.push({ name: 'moreknowledgelist', query: { id: this.category.id } });
		}
    },
    created() {
        this.getcourseList(this.category.id)
        this.getLiveList(this.category.id); //得到直播列表数据
        this.getColumnList(this.category.id); //的到专栏列表数据
    },
    watch: {
        'category.id': function (newVal, oldVal) {
            this.id = newVal;
            this.getLiveList(this.id);
            this.getColumnList(this.id);
        }
    }
};
</script>

<style lang="scss" scoped>
.xjcategorylist {
    .van-card__content {
        margin-left: 20px;
    }

    .van-cell {
        align-items: center;
        border: 1px solid #eee;
        height: 40px;
    }
}

.child-item {
    margin-top: 10px;
    text-align: center;

    .vancol {
        margin-bottom: 8px;

        .defaulttagcolor {
            color: #87929b;
        }

        .selecttagcolor {
            color: #168dfa;
        }
    }
}
.van-card__tag {
    left: -18px;
    top: 14px;
    width: 84px;
    background-color: red;
    transform: rotate(-45deg);
    text-align: center;
}
.van-card__thumb {
    overflow: hidden;
}
</style>
